<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<link href="css/base.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/dialog-1.0.js"></script>
<script src="js/common-1.0.js"></script>
<style type="text/css">
.cPart {
  clear: both;
  overflow: hidden;
}
.cPart .cInner {
  width: 1000px;
  margin: 0 auto;
}
.cHeadPart { height: 80px; }
.cHeadPart .cILogo { margin-top: 20px; }
.cHeadPart .cNav {
  right: 0;
  left: auto;
  top: 20px;
}
.cHeadPart .cNav a {
  padding-left: 40px;
  text-decoration: none;
  color: #322f2c;
  font-size: 18px;
  line-height: 40px;
  _line-height: 42px;
}
.cHeadPart .cNav .focus a { color: #f7941e; }
.cBanner {
  background-color: #ececec;
  height: 402px;
}
.cBanner .cInner {
  background: #ececec url(images/banner.jpg) no-repeat;
  height: 100%;
}
.cLoginBox {
  top: 50%;
  right: 0px;
  left: auto;
  width: 286px;
  height: 324px;
  margin-top: -162px;
}
.cLoginBox .cBg {
  width: 100%;
  height: 100%;
  background-color: #603d13;
  opacity: .45;
  filter: alpha(opacity=45);
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  _background: url(images/lgbk.png) no-repeat;
}
.cLoginBox .cBody { z-index: 2; }
.cLoginBox .cBody dl { padding: 30px; *padding-bottom:28px;
}
.cLoginBox .cBody dt {
  color: #FFF;
  font-size: 18px;
  margin-bottom: 20px;
  _margin-bottom: 17px;
}
.cLoginBox .cBody dd { text-align: center; }
.cLoginBox .cBody .cRow {
  position: relative;
  width: 220px;
  margin: 0 auto;
  margin-bottom: 10px;
*margin-bottom:14px;
}
.cLoginBox .cBody .cSubmitBtn {
  margin-top: 10px;
  letter-spacing: 10px;
  line-height: 40px;
*line-height:38px;
  _line-height: 40px;
  padding-left: 5px;
*padding:0;
}
.cLoginBox .cBody p {
  text-align: center;
  color: #FFF;
  font-size: 14px;
}
.cLoginBox .cBody .cICall {
  vertical-align: middle;
  margin-right: 10px;
}
.cInterface li {
  width: 33.3333333%;
  text-align: center;
  padding: 40px 0;
}
.cTailPart {
  background-color: #f3f3f2;
  text-align: center;
  padding: 20px 0;
  color: #aaaaa3;
  line-height: 22px;
}
.cUlogin {
  width: 220px;
  height: 40px;
}
.cUlogin .cInputInner {
  background-color: #FFF;
  padding: 0 40px;
  padding-right: 35px;
  margin: 0;
}
.cUlogin .cValuePart {
  padding-top: 10px;
  padding-bottom: 10px;
}
.cUlogin .cButton {
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -6px;
  z-index: 2;
}

@media screen and (min-height:800px) {
.cTailPart {
  position: absolute;
  bottom: 0;
  top: auto;
  width: 100%;
}
}
</style>
<!--[if lt IE 8]>

<![endif]-->
</head>

<body>
<div class="cBox">
  <div class="cPart cHeadPart">
    <div class="cInner cRelativeBox">
      <i class="cIcon cILogo"></i>
      <ul class="cNav cHorizontal cAbsoluteBox">
        <li class="focus">
          <a href="#">首页</a>
        </li>
        <li>
          <a href="#">客户端下载</a>
        </li>
        <li>
          <a href="#">在线订购</a>
        </li>
        <li>
          <a href="#">产品介绍</a>
        </li>
        <li>
          <a href="#">联系我们</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="cPart cBanner">
    <div class="cInner cRelativeBox">
      <div class="cAbsoluteBox cLoginBox">
        <div class="cBg cAbsoluteBox"></div>
        <div class="cRelativeBox cBody">
          <dl>
            <dt>&nbsp;&nbsp;用户登录</dt>
            <dd>
              <div class="cRow">
                <div class="cInput cUlogin">
                  <div class="cTypeIcon"><i class="cIcon cIconSize20 cIPhone"></i></div>
                  <div class="cInputInner">
                    <div class="cValuePart">
                      <div class="cValueInner">
                        <div class="cAutoValue">手机号</div>
                        <input type="text" class="cValue" data-type="phone" data-tip="请输入有效手机号码" data-func="function(title,value){alert(title + ' ' + value);}" />
                      </div>
                    </div>
                  </div>
                  <a class="cIcon cButton cIClearBtn"></a>
                </div>
              </div>
            </dd>
            <dd>
              <div class="cRow">
                <div class="cInput cUlogin">
                  <div class="cTypeIcon"><i class="cIcon cIconSize20 cIPassword"></i></div>
                  <div class="cInputInner">
                    <div class="cValuePart">
                      <div class="cValueInner">
                        <div class="cAutoValue">密码</div>
                        <input type="password" class="cValue" onChange="MyCommon.input.doChange=function(o){alert(o.value);}"/>
                      </div>
                    </div>
                  </div>
                  <a class="cIcon cButton cIClearBtn"></a>
                </div>
              </div>
            </dd>
            <dd>
              <div class="cRow">
                <a class="cIcon cButton cSubmitBtn">登录</a>
              </div>
            </dd>
          </dl>
          <p><i class="cIcon cIconSize20 cICall"></i><span>400-818-1000</span></p>
        </div>
      </div>
    </div>
  </div>
  <div class="cPart">
    <div class="cInner">
      <ul class="cInterface cHorizontal">
        <li><i class="cIcon cIOnlineTry"></i></li>
        <li><i class="cIcon cIUsingFree"></i></li>
        <li><i class="cIcon cIDownload"></i></li>
      </ul>
    </div>
    <div class="cClr"></div>
  </div>
  <div class="cPart cTailPart">
    <div class="cInner">
      <p>Copyright &copy; 2006 版权所有 中国电信集团</p>
      <p>全球会易通业务客服热线：4008181000</p>
      <p>[增值电信业务经营许可证A2.B1.B2-20090001]    京公网安备110105002535</p>
    </div>
  </div>
</div>
<script>
		(function($,w){
			$(".cNav li").click(function(e) {
        var o = $(this);
				$(".cNav li").removeClass("focus");
				o.addClass("focus");
      });
			/*$(".cValue").click(function(e) {
				e.preventDefault();
				e.stopPropagation();
				var o=$(this);
				o.parent().addClass("focus");
				o.focus();
			}).blur(function(e) {
				var o=$(this);
				if(o.val()=='') o.parent().removeClass("focus");
			});
			$(".cClearBtn").click(function(e) {
        var o = $(this);
				o.siblings(".cValue").val('');
				o.parent().removeClass("focus");
      });*/
			/*$("#phone").change(function(e) {
        var o = $(this);
				var val = o.val();
				var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
				if(val!=''&&!reg.test(val)) alert("请输入有效的手机号码");
      });*/
		})(jQuery,window);
	</script>
</body>
</html>
